import "./login.scss";
import { useNavigate } from "react-router-dom";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { useUserStore } from "@/stores/user";
import { useForm } from "antd/lib/form/Form";
import { message } from '@/utils/AntdGlobal'

export const Component = () => {
  const [form] = useForm()
  interface FormProps {
    username: string
    password: string
  }
  const { t } = useTranslation()
  const nav = useNavigate()
  const [search] = useSearchParams()
  function onFinish(values: FormProps) {
    useUserStore.getState().login(values).then(() => {
      nav(search.get('redirectPath') ?? '/', {
        replace: true,
      })
      message.success("登录成功")
    })
  }

  useEffect(() => {
    form.setFieldsValue({
      username: 'admin',
      password: '123456'
    })
  })


  return (
    <div className="containerLogin">
      <Form
        form={form}
        name="normal_login"
        className="login-form"
        onFinish={onFinish}
        style={{
          width: "400px",
          height: "320px",
          marginTop: "15%",
          background: "#fff",
          padding: 50,
          borderRadius: "6px"
        }}
      >
        <h1 style={{ marginBottom: '30px',fontSize:'20px',textAlign:'center' }}>智享—智能化饮食服务平台</h1>
        <Form.Item
          name="username"
          rules={[{ required: true, message: '账户不能为空' }]}
        >
          <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="账户" />
        </Form.Item>

        <Form.Item
          name="password"
          rules={[{ required: true, message: '密码不能为空' }]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="密码"
          />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" className="login-form-button" block>
            {t('login.loginBtn')}
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}
